<template>
  <div id="searchList">
    <!-- nav -->
    <van-nav-bar
      title="搜索列表"
      left-arrow
      @click-left="$router.back()"
      fixed
      placeholder
    ></van-nav-bar>
    <!-- center -->
    <div class="searchListBox">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="FinText"
          @load="getList"
        >
          <div
            style="
              border-bottom: 0.5px solid #f8f8f8;
              max-height: 500px;
              margin-bottom: 10px;
              overflow: hidden;
            "
            v-for="item in list"
            :key="item._id"
          >
            <h5>{{ item.title }}</h5>
            <div
              class="imgBox"
              :class="{
                none: item.poster_type == 1,
                articlesingleImg: item.poster_type == 2,
                articlesmoreImg: item.poster_type == 3,
              }"
            >
              <img :src="img" v-for="img in item.imageSrc" :key="img" />
            </div>
            <div class="releasePeople">
              <p>{{ item.author }}</p>
              <p>{{ item.comment }}评论</p>
              <p>{{ item.time | dateFormat }}</p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getSeachApi } from "@/api/search.js";
import { List, PullRefresh } from "vant";

export default {
  name: "searchList",
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  data() {
    return {
      FinText:'------已经被掏空了o(╥﹏╥)o------',
      list: [],
      refreshing: false, //是否刷新
      loading: false, //是否加载中
      finished: false, //是否加载完成
      skip: 0,
      limit: 20,
    };
  },
  computed: {
    key_word() {
      return this.$route.query.key_word;
    },
  },
  created() {
    // this.getList();
  },
  methods: {
    onRefresh() {
      // 刷新执行事件
      this.skip = 0;
      this.finished = false;
      this.getList(true);
    },
    getList(flag) {
      let { key_word, skip, limit } = this;
      getSeachApi({
        key_word,
        skip,
        limit,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          console.log(res)
          if (flag) {
            this.list = res.data;
            this.refreshing = false;
          } else {
            this.list.push(...res.data);
          }

          let len = this.list.length;
          if (len >= res.count) {
            this.finished = true;
          } else {
            this.loading = false;
            this.skip = len;
          }
          if(res.count<= 0){
            this.FinText= '------什么也没有┐(￣ヘ￣)┌------'
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchListBox {
  overflow: hidden;
  img {
    max-width: 50%;
  }

  h5 {
    margin: 10px 20px;
  }

  .articlesmoreImg img {
    width: 110px;
    height: 100px;
  }
}
.imgBox {
  margin-left: 20px;
  margin-right: 20px;
}
.releasePeople {
  color: #afafaf;
  font-size: 6px;
  display: flex;
}
.releasePeople p {
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
}
</style>

